<template>
  <view class="container">
    <view class="common_cell">
      <picker-view
        :indicator-style="indicatorStyle"
        :value="value"
        @change="bindChange"
        class="picker-view"
      >
        <picker-view-column>
          <view class="item" v-for="(item, index) in oneLevel" :key="index">{{
            item < 10 ? "0" + item : item
          }} 小时</view>
        </picker-view-column>
        <picker-view-column>
          <view class="item" v-for="(item, index) in twoLevel" :key="index"
            >{{ item < 10 ? "0" + item : item }} 分钟
          </view>
        </picker-view-column>
        <picker-view-column>
          <view class="item" v-for="(item, index) in threeLevel" :key="index"
            >{{ item < 10 ? "0" + item : item }} 秒
          </view>
        </picker-view-column>
      </picker-view>
      <!-- <u-cell title="定时" isLink @click="show = true" /> -->
    </view>
  </view>
</template>
      
      <script>
const days = [];
const hours = [];
// 分钟
const minutes = [];

for (let i = 1; i <= 60; i++) {
  days.push(i);
}
for (let i = 0; i <= 23; i++) {
  hours.push(i);
}
for (let i = 0; i <= 59; i++) {
  minutes.push(i);
}

// 小时数

export default {
  components: {},
  data() {
    return {
      // 页面参数
      options: {},
      show: false,
      value1: Number(new Date()),

      title: "picker-view",
      oneLevel: hours,
      twoLevel: minutes,
      threeLevel: minutes,
      visible: true,
      indicatorStyle: `height: 50px;`,

      
      // 时间
      hours: "",
      // 分钟
      minutes: "",
      // 秒
      seconds: "",
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {},
  onUnload() {
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.emit("delayChange", {
        hours: this.hours,
        seconds: this.seconds,
      minutes: this.minutes,
    });
  },

  methods: {
    bindChange: function (e) {
      const val = e.detail.value;
      this.hours = this.oneLevel[val[0]];
      this.minutes = this.twoLevel[val[1]];
      this.seconds = this.threeLevel[val[2]];
    },
    confirm(_values) {
      console.log(_values);
    },
    toConfig() {
      uni.navigateTo({
        url: "/pages/automationConfig/stateChange/stateConfig/index",
      });
    },
  },
};
</script>
      
      <style lang="scss" scoped>
.container {
  background: #f6f7fb;

  padding: 17.045rpx 42.614rpx 0px 42.614rpx;

  .title {
    color: rgba(0, 0, 0, 0.5);
    font-family: "Microsoft YaHei";
    font-size: 25.568rpx;
    font-weight: 400;
    line-height: 33.75rpx;
    text-align: left;
    margin-left: 17.045rpx;
  }
}

.picker-view {
  // width: 750rpx;
  height: 344.318rpx;
  margin-top: 20rpx;
}
.item {
  line-height: 100rpx;
  text-align: center;
}
</style>
      